<script setup lang="ts">
import { onMounted } from 'vue';
import dayjs from 'dayjs';
import { showLoading, getCurrentInstance } from '@tarojs/taro';
import EmergencyStepList from '../../components/emergency-step-list.vue';
import { QUERY_EMERGENCY_PLAN_DETAIL } from '/@/api/modules/base/emergency-plan';
import { state } from './state';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
};
function queryDetail() {
  showLoading();
  QUERY_EMERGENCY_PLAN_DETAIL({ id: params.id }).then((res) => {
    state.detail = res.emergencyPlanDetailDto;
  });
}
onMounted(() => {
  queryDetail();
});
</script>

<template>
  <view class="plan-detail app-page--1">
    <app-navbar title="预案详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="plan-detail__wrapper">
        <nut-cell-group>
          <nut-cell>
            <template #title>
              <view class="plan-detail__title">
                {{ state.detail?.emergencyPlanDto?.emergencyPlanName || '-' }}
              </view>
              <view class="plan-detail__sub-title">
                {{ dayjs(state.detail?.emergencyPlanDto?.createTime).format('YYYY-MM-DD') || '-' }}
              </view>
            </template>
          </nut-cell>
          <nut-cell>
            <template #title>
              <view>
                <view class="plan-detail__title">处置步骤</view>
                <emergency-step-list :list="state.detail?.emergencyPlanStepDto" />
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
